<template>
  <div>
    <div class="agencyApproval">
      <el-card style="max-width:1200px;" class="adminTask">
        <template #header>管理员审批</template>
        <el-table :data="adminTask">
          <el-table-column
            prop="recipientName"
            label="请求人"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="month"
            label="租赁月份"
            width="120"
          ></el-table-column>
          <el-table-column prop="contractStencil" label="合同模板" width="120">
            <template #default="scope">
              <el-button type="primary" @click="handleClick(scope.row)">
                查看模板
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="contractStencil" label="操作" width="170">
            <template #default="scope">
              <el-button type="success" @click="success(scope.row)">
                同意
              </el-button>
              <el-button type="danger" @click="rejuest(scope.row)">
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-card style="max-width:1200px;" class="mangerTask">
        <template #header>经理审批</template>
        <el-table :data="managerTask">
          <el-table-column
            prop="recipientName"
            label="请求人"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="startTime"
            label="开始时间"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="endTime"
            label="结束时间"
            width="120"
          ></el-table-column>
          <el-table-column
            prop="month"
            label="租赁周期"
            width="120"
          ></el-table-column>
          <el-table-column prop="contractStencil" label="合同模板" width="120">
            <template #default="scope">
              <el-button type="primary" @click="handleClick(scope.row)">
                查看模板
              </el-button>
            </template>
          </el-table-column>
          <el-table-column prop="contractStencil" label="操作" width="170">
            <template #default="scope">
              <el-button type="success" @click="success(scope.row)">
                同意
              </el-button>
              <el-button type="danger" @click="rejuest(scope.row)">
                拒绝
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { getTask, completeTask } from '@/api/signup'
import { ElMessage, ElMessageBox } from 'element-plus'

const adminTask = ref([])
const managerTask = ref(null)
onMounted(async () => {
  const resAdmin = await getTask('admin')
  const resManager = await getTask('manager')
  adminTask.value = resAdmin.data
  managerTask.value = resManager.data
})
const handleClick = template => {
  console.log(template.contractStencil)
}
const tackDTO = ref({
  taskId: '',
  approval: null,
})
const success = async task => {
  //弹窗 确认同意么
  ElMessageBox.confirm('确认要同意编号为' + task.contractNumber + '的申请吗?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      tackDTO.value.taskId = task.taskId
      tackDTO.value.approval = true
      console.log(tackDTO.value)
      const res = await completeTask(tackDTO.value)
      if (res.code == 200) {
        ElMessage({ message: '操作成功' })
      } else {
        ElMessage({ message: '操作失败' })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消选择',
      })
    })
}
const rejuest = async task => {
  //弹窗 确认同意么
  ElMessageBox.confirm('确认要拒绝编号为' + task.contractNumber + '的申请吗?', {
    confirmButtonText: '确认',
    cancelButtonText: '取消',
    type: 'warning',
  })
    .then(async () => {
      tackDTO.value.taskId = task.taskId
      tackDTO.value.approval = false
      const res = await completeTask(tackDTO.value)
      if (res.code == 200) {
        ElMessage({ message: '操作成功' })
      } else {
        ElMessage({ message: '操作失败' })
      }
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '取消选择',
      })
    })
}
</script>

<style lang="scss" scoped>
.adminTask {
  margin-bottom: 20px;
}
</style>
